<template>
  <div v-if="cDetails">
    <el-drawer
      :title="detailsData.name"
      :visible.sync="cDetails"
      direction="rtl"
      :close-on-press-escape="false"
      :wrapperClosable="false"
    >
      <div class="drawer_pad">
        <div class="top_data">
          <table style="font-size: 12px; white-space: nowrap">
            <tr style="color: #75829e">
              <td style="width: 200px"><span>工商信息</span></td>
              <td style="width: 100px"><span>电话</span></td>
              <td style="width: 100px"><span>销售机会金额</span></td>
              <td style="width: 100px"><span>订单销售金额</span></td>
            </tr>
            <tr>
              <td>未关联</td>
              <td>{{
                detailsData.phone !== "" ? detailsData.phone : "--"
              }}</td>
              <td>0.00元</td>
              <td>0.00元</td>
            </tr>
          </table>
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="企业资料" name="data">
            <h6
              class="operable"
              @click="visualizationList.contacts = !visualizationList.contacts"
            >
              <i
                :class="
                  visualizationList.contacts
                    ? 'el-icon-caret-bottom'
                    : 'el-icon-caret-top'
                "
              ></i
              >企业联系人
              <div style="float:right">
                <!-- <el-button
                v-if="visualizationList.contacts"
                @click.stop="addwcontact(0)"
                type="primary"
                size="mini"
                class="el-icon-plus"
                >新增联系</el-button
              > -->
              <el-button
                v-if="visualizationList.contacts"
                @click.stop="addContacts(0)"
                type="primary"
                class="el-icon-plus"
                size="mini"
                >创建联系人</el-button
              >
              </div>
            </h6>
            <el-table
             v-if="visualizationList.contacts"
                :data="detailsData.contacts"
                class="ellipsis"
                style="width: 100%">
                <el-table-column
                    label="联系人名称"
                    width="180">
                    <template slot-scope="scope">
                        <div v-if="isreturn == 0" class="edit_btn" @click="details(scope.row)">
                            <span :title="scope.row.name">{{scope.row.name!==''?scope.row.name:'--'}}</span>
                        </div>
                        <div v-else>
                          <span :title="scope.row.name">{{scope.row.name!==''?scope.row.name:'--'}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="跟进人/公海">
                    <template slot-scope="scope">
                        <span :title="scope.row.owner_user">{{scope.row.owner_user!==''?scope.row.owner_user:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="职务">
                    <template slot-scope="scope">
                        <span :title="scope.row.position">{{scope.row.position!==''?scope.row.position:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="联系人手机号">
                    <template slot-scope="scope">
                        <span :title="scope.row.phone">{{scope.row.phone!==''?scope.row.phone:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="标签">
                    <template slot-scope="scope">
                        <span :title="scope.row.external_userid">{{scope.row.external_userid!==''?'@微信':'--'}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <h6
              class="operable"
              @click="visualizationList.basic = !visualizationList.basic"
            >
              <i
                :class="
                  visualizationList.basic
                    ? 'el-icon-caret-bottom'
                    : 'el-icon-caret-top'
                "
              ></i
              >基础信息<el-button
                v-if="visualizationList.basic"
                style="float: right"
                @click.stop="showEditer(1)"
                type="primary"
                size="mini"
                >编辑</el-button
              >
            </h6>
            <el-descriptions v-if="visualizationList.basic" :column="2">
              <el-descriptions-item label="企业名称">{{
                detailsData.name !== "" ? detailsData.name : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{
                detailsData.phone !== "" ? detailsData.phone : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="企业网址">{{
                detailsData.web_site !== "" ? detailsData.web_site : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="email">
                {{ detailsData.email !== "" ? detailsData.email : "--" }}
              </el-descriptions-item>
              <el-descriptions-item label="行业类型">{{
                detailsData.industry !== ""
                  ? detailsData.industry
                  : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="公司规模">{{
                detailsData.scale !== "" ? detailsData.scale : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="等级">{{
                detailsData.level !== "" ? detailsData.level : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="地址"
                ><span
                  v-if="detailsData.area !== '' || detailsData.address !== ''"
                >
                  {{ detailsData.area }}{{ detailsData.address }}
                </span>
                <span v-else> -- </span></el-descriptions-item
              >
              <el-descriptions-item label="备注">{{
                detailsData.remark !== "" ? detailsData.remark : "--"
              }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- 新增编辑 -->
    <add-enterprise
      ref="enterpriseForm"
      :data="data"
      :start="1"
    ></add-enterprise>
    <addCustomerData
        ref="customerData"
        :start="1"
        @getobject="getenterprise"
      ></addCustomerData>
      <details-contacts
      ref="detailscontacts"
      :parentdetails="detailsId"
      :isreturn="1"
    ></details-contacts>
  </div>
  </div>
</template>

<script>
import addCustomerData from "./addCustomerData.vue";
import addEnterprise from "./addEnterprise.vue";
export default {
  name: "detailsEnterprise",
  props: ["parentdetails", "isreturn"],
  components: {
    addCustomerData,
    addEnterprise,
    detailsContacts: () => import('./detailsContacts.vue'),
  },
  data() {
    return {
      loading: false,
      // 企业操作
      dialogEditer: false,
      cDetails: false,
      data: [],
      detailsId: "", // 联系人id
      activeName: "data",
      visualizationList: {
        basic: true, // 基础信息
        contacts: true, // 联系人
      },
      tableData: [],
      detailsId: "", // 详情id
      detailsData: [],
    };
  },
  watch: {
    cDetails(newData, oldData) {
      if (newData) {
        this.getenterprise();
      }
    },
  },
  created() {},
  methods: {
    // 查看企业详情
    getenterprise() {
      this.$cmsapi.findCustomer(this.parentdetails).then(
        (res) => {
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              for (const key in res.data[i]) {
                if (!res.data[i][key] && res.data[i][key] !== 0) {
                  res.data[i][key] = "";
                }
              }
            }
            this.detailsData = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 查看联系人详情
    details(obj) {
      this.detailsId = obj.id;
      this.$refs.detailscontacts.cDetails = true;
    },
    // 新增联系人
    addContacts() {
      this.$refs.customerData.drawer = true;
    },
    // 新增编辑
    showEditer(type) {
      if (type == 0) {
        // 新增
        this.data = this.$options.data().data;
        this.$refs.enterpriseForm.dialogEditer = true;
      } else {
        // 编辑
        this.data = this.detailsData;
        this.$refs.enterpriseForm.dialogEditer = true;
      }
    },
  },
};
</script>

<style scoped>
/deep/ .el-drawer__header {
  margin-bottom: 20px !important;
}
.top_data {
  background-color: #f8f9fa;
  padding: 15px;
  margin-top: 0px;
  border-radius: 10px;
  border: 1px solid #f0f0f4;
}
h6 {
  background: #f8f9fa;
  line-height: 25px;
  padding: 10px;
  margin: 10px 0 !important;
}
.shuttle {
  width: 45%;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  min-width: 100px;
  padding: 10px;
}
.s_tree {
  height: 236px;
  overflow: hidden;
  overflow-y: auto;
}
</style>>